<template>
	<div class="tabbar w-100 d-flex text-center">
		<!-- active-class 点击后为活跃状态 -->
		<router-link
			class="d-block pt-1 flex-1"
			v-for="(item,index) in data"
			v-bind:key="index"
			:to="item.path"
			active-class="is-selected"
		>
			<!-- 这次用的是bootstrap的字体图标，一般都是用iconfont的矢量图标,动态类名claaa="fa fa-home"/"fa fa-home" -->
			<div>
				<i class="fs-xl" :class="'fa fa-' + item.icon"></i>
			</div>
			<div class="pt-1 fs-xs ai-center">{{item.title}}</div>
		</router-link>
	</div>
</template>

<script>
export default {
	name:"TabBar",
	// 接手Index.vue传递的data，值为tabbarData
	props:{
		data:Array
	}
}
</script>

<style scoped>
a {
  text-decoration: none;
}
</style>
